<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue实现用户信息表</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
    <script src="/vue.js"></script>
</head>
<style>
    .container{
        padding-top:20px;
    }
    table{
        text-align: center;
        margin-top:20px;
    }
    th{
        text-align: center;
    }
    table button{
        margin-right:10px;
    }
    .sel{
        background: rgb(238, 250, 255);
    }
    .table-hover>tbody>tr.sel:hover{
        background: rgb(238, 250, 255);
    }
    .table-hover>tbody>tr:hover{
        background: rgb(255, 245, 250);
    }
    .btn{
        background: rgb(187, 225, 241);
        color:white;
    }
</style>
<body>
    <div class="container">
        <button class="btn btn-sm" @click='revSel()'>反选</button>
        <button class="btn btn-sm" @click='delSel()'>删除</button>
        <table style="table-layout:fixed;" align="center" border="1" cellspacing="0" cellpadding="10" class="table table-hover">
            <thead>
                <tr>
                    <th><input type="checkbox" v-model='checked' @change='allSel()'></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr :class='val.class' v-for='(val,index) in users'>
                    <td><input type="checkbox" v-model='val.checked' @change='sel()'></td>
                    <td>{{val.id}}</td>
                    <td>{{val.name}}</td>
                    <td v-html='gender(val.gender)'></td>
                    <td>
                        <button class="btn btn-sm" @click='del(index)'>删除</button>
                        <button class="btn btn-sm">编辑</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    var vm=new Vue({
        el:'.container',
        data(){
            return {
                users:[
                    {id:1,name:'Erza',gender:0,checked:false,class:''},
                    {id:2,name:'Gerall',gender:1,checked:false,class:''},
                    {id:3,name:'Lucy',gender:0,checked:false,class:''},
                    {id:4,name:'Natsu',gender:1,checked:false,class:''},
                    {id:5,name:'Judith',gender:0,checked:false,class:''},
                    {id:6,name:'Grey',gender:1,checked:false,class:''},
                ],
                checked:false
            }
        },
        methods:{
            gender(gender){
                if(gender=='0'){
                    return '女';
                }else{
                    return '男';
                }
            },
            allSel(){
                this.users.forEach((val)=>{
                    val.checked=this.checked;
                });
                this.sel();
            },
            revSel(){
                this.users.forEach((val)=>{
                    val.checked=!val.checked;
                });
                this.sel();
            },
            delSel(){
                if(!confirm('确认删除吗？')){
                    return;
                }
                this.users=this.users.filter((val,index)=>{
                    return !val.checked;
                })
                this.checked=false;
            },
            del(index){
                if(!confirm('确认删除吗？')){
                    return;
                }
                this.users.splice(index,1);
            },
            sel(){
                var num=0;
                this.users.forEach((val)=>{
                    if(val.checked){
                        num++;
                        val.class='sel';
                    }else{
                        val.class='';
                    }
                    if(num==this.users.length){
                        this.checked=true;
                    }else{
                        this.checked=false;
                    }
                });
            }
        }
    });
</script>
</html>